<template>
	<div class="OrderWorkTongJi">
		<div class="OrderZhanBi-common-layout">
			<el-container>
				<el-header class="OrderZhanBi-Header">
					<div class="OrderZhanBi-Header-1">工单占比</div>
					<div class="OrderZhanBi-Header-2">
						<el-date-picker v-model="cs" type="daterange" range-separator="至" start-placeholder="Start date"
							end-placeholder="End date" />
					</div>
				</el-header>
				<el-main class="OrderZhanBi-Main">
					<div ref="chartDom1" style="width: 600px; height: 400px;"></div>
				</el-main>
			</el-container>
		</div>
		<div class="OrderFenBu-common-layout">
			<el-container>
				<el-header class="OrderFenBu-Header">
					<div class="OrderFenBu-Header-1">
						工单分布统计
					</div>
					<div class="OrderFenBu-Header-2">
						<el-date-picker v-model="cs" type="daterange" range-separator="至" start-placeholder="Start date"
							end-placeholder="End date" />
					</div>
				</el-header>
				<el-main class="OrderFenBu-Main">
					<div ref="chartDom2" style="width: 600px; height: 400px;"></div>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive } from 'vue';
	import * as echarts from 'echarts';
	import $http from '../router/AxiosApi';
	const cs = ref([new Date("2024-07-01"), new Date("2024-07-07")])
	const chartDom1 = ref<HTMLElement | null>(null);
	const chartDom2 = ref<HTMLElement | null>(null);
	const resData = ref([]);

	$http.post("findOrderZB").then((res) => {
		resData.value = res.data; // 直接将返回的数据赋值给resDataList
		if (resData.value.length > 0) {
			// 计算总数并验证
			const firstCount = Number(resData.value[0].count);
			const secondCount = Number(resData.value[1].count);
			const totalCount = firstCount + secondCount;
		}
		const data1 = resData.value.map(item => ({
			name: item.order_name,
			value: Number(item.count)  // 确保是数字类型
		}));

		// 计算总数
		const total1 = data1.reduce((acc, curr) => acc + curr.value, 0);

		// 更新 option1
		const option1 = {
			tooltip: {
				trigger: 'item',
				formatter: '{b}: {c} ({d}%)'
			},
			legend: {
				top: '5%',
				left: 'center'
			},
			graphic: [
				{
					type: 'text',
					left: 'center',
					top: 'middle',
					style: {
						text: '工单总数\n' + total1,
						textAlign: 'center',
						fill: '#000',
						fontSize: 18,
						fontWeight: 'bold'
					}
				}
			],
			series: [
				{
					name: '工单类型',
					type: 'pie',
					radius: ['40%', '60%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: false
						}
					},
					labelLine: {
						show: false
					},
					data: data1
				}
			]
		};

		// 初始化并设置图表
		if (chartDom1.value) {
			const myChart1 = echarts.init(chartDom1.value);
			myChart1.setOption(option1);
		}
	});
	
	const data2 = reactive([]);
	$http.post("ChaAdressFenBu").then((res) => {
	    // 更新 adress 对象
	    res.data.data.forEach(item => {
	        if (item.adress){
				let a = item.adress.split('-');
				data2.push({
					name: a[0],
					children: [
						{
							name: a[1],
							children: [
								{
									name: a[2],
									children: [
										{ name: a[3], value: 1 }
									]
								}
							]
						}
					]
				})
			} 
	    });
	    // 配置图表
	    const option2 = {
	        series: {
	            type: 'sunburst',
	            data: data2,
	            radius: [0, '90%'],
	            label: {
	                rotate: 'radial'
	            }
	        }
	    };
	
	    // 渲染图表
	    if (chartDom2.value) {
	        const myChart2 = echarts.init(chartDom2.value);
	        myChart2.setOption(option2);
	    } else {
	        console.error("chartDom2 为空");
	    }
	});
</script>

<style scoped>
	.OrderWorkTongJi {
		width: 1390px;
		margin-left: 10px;
		margin-top: 20px;
		display: flex;
	}

	.OrderZhanBi-common-layout {
		width: 850px;
		background-color: white;
		border-radius: 10px;
	}

	.OrderFenBu-common-layout {
		width: 850px;
		background-color: white;
		border-radius: 10px;
		margin-left: 20px;
	}

	.OrderZhanBi-Header {
		display: flex;
		justify-content: space-between;
		/* 左右对齐，中间自动间隔 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.OrderZhanBi-Header-1 {
		font-weight: bold;
	}

	.OrderFenBu-Header {
		display: flex;
		justify-content: space-between;
		/* 左右对齐，中间自动间隔 */
		align-items: center;
	}

	.OrderFenBu-Header-1 {
		font-weight: bold;
	}
</style>